<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-27 14:20:29
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-06-02 12:54:23
 * @FilePath: \ant-design-vue-jeecg-master\src\views\grid\modules\historyValue.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-modal
      title="历史值"
      width="750px"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-button type="primary" @click="addValue">新增</a-button>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        class="j-table-force-nowrap"
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text, record">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
          <img
            v-else
            :src="getImgView(text)"
            :preview="record.id"
            height="25px"
            alt=""
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <!-- <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>

        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleDetail(record)">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm overlayClassName="poperLayTable"  title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span> -->
      </a-table>

      <!-- <nmc-package-grid-value-modal ref="modalForm" @ok="modalFormOk"></nmc-package-grid-value-modal> -->
    </a-modal>
    <a-modal title="新增工程量值" :visible="visibleAdd" @ok="handleOkAdd" @cancel="handleCancelAdd" :zIndex="1001">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <!-- <a-col :span="24">
            <a-form-model-item label="工程量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageGridId">
              <a-select v-model="model.packageGridId" placeholder="请选择" @change="handleChange">
                <a-select-option :value="item.id" v-for="item in gridDynamicsLengthIdList" :key="item.id">{{
                  item.gridName
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-model-item label="工程量值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="packageGridValue">
              <a-select
                show-search
                optionFilterProp="children"
                v-if="type == 'SELECT'"
                v-model="model.packageGridValue"
                placeholder="请选择"
              >
                <a-select-option :value="item.enumValue" v-for="item in packageGridValueList" :key="item.id">{{
                  item.enumName
                }}</a-select-option>
              </a-select>
              <div v-if="type == 'INPUT'" id="telWrap">
                <div>
                  <span :key="index" v-for="(i, index) in length">
                    <a-input
                      :maxLength="2"
                      style="width: 50px; margin-right: 10px"
                      v-model="model.Values[index]"
                      @change="
                        (val) => {
                          handleInput(val, model.Values)
                        }
                      "
                    ></a-input>
                  </span>
                  <div style="color: red" v-if="falseFlag">请输入两位16进制数</div>
                </div>
              </div>
              <a-input
                v-if="type == 'BYTE_STREAM'"
                v-model="model.packageGridValue"
                placeholder="请输入工程量值"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
// import NmcPackageGridValueModal from './modules/NmcPackageGridValueModal'
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  components: {
    // NmcPackageGridValueModal,
  },
  created() {
    // document.addEventListener('keyup', this.tabForward) //光标自动切换
  },
  data() {
    return {
      visible: false,
      visibleAdd: false,
      model: { packageGridValue: '', Values: [] },
      validatorRules: {},
      confirmLoading: false,
      url: {
        list: '/grid/nmcPackageGridValue/list',
        add: '/grid/nmcPackageGridValue/add',
        PackageGridList: '/grid/nmcPackageGrid/list',
        packageGridValueList: '/grid/nmcPackageGridEnum/list',
      },
      type: 'INPUT',
      dataSource: [],
      dictOptions: {},
      packageGridId: '',
      superFieldList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '工程量',
          align: 'center',
          dataIndex: 'packageGridId_dictText',
        },
        {
          title: '工程量值',
          align: 'center',
          dataIndex: 'packageGridValue',
        },
        {
          title: '生成时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   fixed: 'right',
        //   width: 147,
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      gridDynamicsLengthIdList: [],
      packageGridValueList: [],
      gridEnumsTypeId: '',
      length: 2,
      falseFlag: false,
    }
  },
  methods: {
    // tabForward(event) {
    //   var target = event.target
    //   if (target.value.length == target.maxLength) {
    //     // 注意不是maxlength
    //     var elements = document.getElementById('telWrap').getElementsByTagName('input')
    //     for (let i = 0; i < elements.length; i++) {
    //       if (elements[i] == target) {
    //         if (elements[i + 1] && !this.falseFlag) {
    //           elements[i + 1].focus()
    //         }
    //         return // 退出当前函数
    //       }
    //     }
    //   }
    // },
    handleInput(e, record) {
      this.falseFlag = false
      let val = e.target.value
      let reg = /^[A-Fa-f0-9]{2}$/
      if (!reg.test(val)) {
        this.falseFlag = true
        return false
      }
      record.forEach((e) => {
        if (!reg.test(e)) {
          this.falseFlag = true
          return false
        }
      })
    },
    addValue() {
      this.visibleAdd = true
      // this.model.packageGridValue = ''
      if (this.type == 'INPUT') {
        this.model.packageGridValue = ''
        this.model.Values = []
      }
    },
    handleOkAdd(e) {
      this.model.packageGridId = this.packageGridCode
      console.log(this.model)
      if (this.type == 'INPUT') {
        this.model.packageGridValue = this.model.Values.join('').toUpperCase()
      }
      // if (this.model.Values) delete this.model.Values
      // this.visibleAdd = false
      // return
      if (!this.falseFlag) {
        httpAction(this.url.add, this.model, 'post').then((res) => {
          this.visibleAdd = false
          getAction(`${this.url.list}?packageGridId=${this.packageGridId}`, {
            order: 'desc',
            column: 'createTime',
          }).then((res) => {
            this.dataSource = [...res.result.records]
            this.$emit('ok')
          })
        })
      }
    },
    getList() {
      //工程量列表
      getAction(this.url.PackageGridList, {}).then((res) => {
        if (this.type == 'SELECT') {
          //工程量zhi列表
          getAction(`${this.url.packageGridValueList}?enumTypeId=${this.gridEnumsTypeId}`, {}).then((res) => {
            this.packageGridValueList = [...res.result.records]
            // console.log()
          })
        }
      })
    },
    handleCancelAdd(e) {
      this.model = { packageGridValue: '', Values: [] }
      this.visibleAdd = false
    },
    showModal(record) {
      console.log(record)
      this.type = record.gridInputType
      // if (this.type == 'INPUT') {
      //   this.model.Values = []
      // }
      if (record.gridStaticLength && this.type == 'INPUT') {
        this.length = record.gridStaticLength
        this.model.Values = []
      }
      this.packageGridCode = record.gridCode
      this.packageGridId = record.id
      // this.packageGridId = record.id
      this.gridEnumsTypeId = record.gridEnumsTypeId
      this.visible = true
      getAction(`${this.url.list}?packageGridId=${record.id}`, { order: 'desc', column: 'createTime' }).then((res) => {
        this.dataSource = [...res.result.records]
        // console.log(this.dataSource)
      })
      this.getList()
    },
    handleOk(e) {
      this.confirmLoading = true
      this.visible = false
      this.confirmLoading = false
    },
    handleCancel(e) {
      this.visible = false
      // this.model = {}
      if (this.type == 'INPUT') {
        this.model = { packageGridValue: null, Values: [] }
      } else {
        this.model = {}
      }
    },
  },
}
</script>

<style>
/* div{
  position: absolute;
} */
</style>
